import React, { PureComponent } from 'react';
import { Grid, Flex, List, WhiteSpace } from 'antd-mobile';
import { routerRedux } from 'dva/router';

import Img from '../../components/Img/Img';

import { recommend } from './RecommendGoods.less';

class RecommendGoods extends PureComponent {

  // onClick = (el, index) => {
  //   common.gotoGoodsDetail({ specId: el.specId });
  // }


  render() {
    const { data = [], dispatch, style } = this.props;

      return (
            <List
              className={ recommend }
              renderHeader={() =>{
                  return (
                      data[0] ?
                      <Flex justify="center">
                          <Img style={{ width: '1rem' }} src={ '/upload/logo/04af1905559e566e2e2ca7aca6ae2090.jpg' } />
                      <div className="floor_name" style={{fontSize: '.3rem', fontWeight: 'bold', padding: '0rem .3rem', margin: '.3rem 0rem'}}>为你推荐</div>
                          <Img style={{ width: '1rem' }} src={ '/upload/logo/04af1905559e566e2e2ca7aca6ae2090.jpg' } />
                      </Flex> : ''
                  )
              }
              } style={ style || {marginTop:".3rem"}}>

              <div style={{ borderRight:'0.1rem solid #F7F7F7', borderLeft:'0.1rem solid #F7F7F7' }}>
                  <Grid
                      className="recommend_grid"
                      data={data}
                      columnNum={2}
                      renderItem={(dataItem, index) => (
                          <Flex className="recommend_Item" direction="column" onClick={() => {
                              dispatch(routerRedux.push(`/goodsDetail/${dataItem.specId}`))
                          }}>
                              <div style={{ boxSizing:"border-box", width: '3rem', height:'3rem',overflow:"hidden",textAlign:"center" }}>
                                  <Img style={{ width:'2rem',height:"2rem",marginTop:".5rem" }} src={dataItem.goodsImage || dataItem.goodsimage} />
                              </div>
                              <div style={{ boxSizing:"border-box",  padding: '0rem 0.2rem', width: '100%', height: '1rem', lineHeight: '0.5rem' }}>
                                  <div style={{ color:'#959595', textAlign: 'center' }} className="text-overflow-hidden">{dataItem.goodsName}</div>
                                  <div style={{ textAlign: 'center' }}>￥{dataItem.goodsPrice}</div>
                              </div>
                          </Flex>
                      )}
                  />
              </div>

          </List>
          )
  }
}

export default RecommendGoods;

/*
 * 推荐列表
 * */
